import 'package:flutter/material.dart';

class Login extends StatefulWidget {
  Login({Key key}) : super(key: key);

  @override
  _LoginState createState() => _LoginState();
}

class _LoginState extends State<Login> {
  final GlobalKey<FormState> _signInFormKey = GlobalKey<FormState>();
  final _isShowPassWord = false; // 是否显示密码

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.orange,
      appBar: AppBar(
        title: Text('用户登录'),
        centerTitle: true,
        elevation: 0,
        backgroundColor: Colors.orange,
      ),
      body: Stack(
        children: [
          Container(
            margin: EdgeInsets.all(20),
            height: 210,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(8)), 
              color: Colors.orange[200],
            ),
          ),
                  // // 头像
                  // CircleAvatar(
                  //   backgroundColor: Colors.orange[100],
                  //   radius: 50,
                  //   child: Icon(Icons.person, size: 80, color: Colors.white,),
                  // ),

          Positioned(
            // top: 30,
            child:  Container(
              margin: EdgeInsets.all(10),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(8)), 
                color: Colors.white,
              ),
              width: double.infinity,
              height: 190,
              child: Form(
                key: _signInFormKey,
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Flexible(
                      child: Padding(
                        padding: EdgeInsets.only(left: 25, right: 25, top: 20, bottom: 20),
                        child: TextFormField(
                          decoration: InputDecoration(
                              icon: Icon(Icons.phone_android, color: Colors.black,),
                              hintText: "请输入手机号",
                              // border: InputBorder.none
                          ),
                          style: TextStyle(fontSize: 16, color: Colors.black),
                          //验证
                          validator: (value) {
                            RegExp reg = new RegExp(r'^\d{11}$');
                            if (!reg.hasMatch(value)) {
                              return '手机号格式不正确';
                            }
                            return null;
                          },
                          onSaved: (value) {

                          },
                        ),
                      ),
                    ),
                    Flexible(
                      child: Padding(
                        padding: EdgeInsets.only(left: 25, right: 25, top: 20),
                        child: TextFormField(
                          decoration: InputDecoration(
                            icon: Icon(Icons.lock, color: Colors.black,),
                            hintText: "请输入密码",
                            // border: InputBorder.none,
                            suffixIcon: IconButton(
                              icon: Icon(Icons.remove_red_eye, color: Colors.black,),
                              onPressed: (){} 
                            )
                          ),
                          //输入密码，需要用*****显示
                          obscureText: !_isShowPassWord,
                          style: TextStyle(fontSize: 16, color: Colors.black),
                          validator: (value) {
                            if (value == null || value.isEmpty || value.length < 6) {
                              return "Password'length must longer than 6!";
                            }
                            return null;
                          },
                          onSaved: (value) {

                          },
                        ),
                      ),
                    ),

                  ],
                )
              ),
            )
          ),
        ],
      ),
     
    );
  }
}